<template>
    <div class="projectInfo">
        <div class="item" style="margin-left:30px;">
            <div class="item-title"><div style="font-size:32px;font-weight:400">{{data.name}}</div></div>
            <div class="item-content" style="text-indent:2em">{{data.consContent}}</div>
        </div>
        <div class="item">
            <div class="sign"></div>
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">基本信息</span></div></div>
            <div class="item-content">
                <dl class="subItem" style="float:left">
                    <dt class="subItem-title">项目名称</dt>
                    <dd class="subItem-content">{{data.name}}</dd>
                    <dt class="subItem-title">项目类型</dt>
                    <dd class="subItem-content">{{data.projectType}}</dd>
                    <dt class="subItem-title">建设必要性</dt>
                    <dd class="subItem-content">{{data.consNecessity}}</dd>
                    <dt class="subItem-title">建设内容</dt>
                    <dd class="subItem-content" :title="data.consContent">{{data.consContent}}</dd>
                    <dt class="subItem-title">建设必要性</dt>
                    <dd class="subItem-content">{{data.consNecessity}}</dd>
                    <dt class="subItem-title">中标时间</dt>
                    <dd class="subItem-content">{{data.winBidTime}}</dd>
                    <dt class="subItem-title">总投资</dt>
                    <dd class="subItem-content">{{data.realInvestment}}</dd>
                    <dt class="subItem-title">前期手续办理情况</dt>
                    <dd class="subItem-content">{{data.procedures}}</dd>
                    <dt class="subItem-title">存在问题(市级)</dt>
                    <dd class="subItem-content">{{data.problemShi}}</dd>
                    <dt class="subItem-title">存在问题(管委会)</dt>
                    <dd class="subItem-content" :title="data.problemGWH">{{data.problemGWH}}</dd>
                     <dt class="subItem-title">立项总投资(可研)</dt>
                    <dd class="subItem-content">{{data.projInvestment}}</dd>
                     <dt class="subItem-title">立项总投资(初设)</dt>
                    <dd class="subItem-content">{{data.projInvestmentFirstFound}}</dd>
                    <dt class="subItem-title">投资备注</dt>
                    <dd class="subItem-content">{{data.investmentNote}}</dd>
                </dl>
                <dl class="subItem" style="float:right">
                    <dt class="subItem-title">建设起始时间</dt>
                    <dd class="subItem-content">{{data.consStartYear}}</dd>
                    <dt class="subItem-title">建设终止时间</dt>
                    <dd class="subItem-content">{{data.consEndYear}}</dd>
                    <dt class="subItem-title">预计开复工时间</dt>
                    <dd class="subItem-content">{{data.planStartWorkTime}}</dd>
                    <dt class="subItem-title">实际开复工时间</dt>
                    <dd class="subItem-content">{{data.realStartWorkTime}}</dd>
                    <dt class="subItem-title">计划竣工时间</dt>
                    <dd class="subItem-content">{{data.planCompleteTime}}</dd>
                    <dt class="subItem-title">建设地点</dt>
                    <dd class="subItem-content">{{data.consLocation}}</dd>
                    <dt class="subItem-title">项目审批单位</dt>
                    <dd class="subItem-content">{{data.projExaminationOrg}}</dd>
                    <dt class="subItem-title">项目责任单位</dt>
                    <dd class="subItem-content">{{data.projResponsibleOrg}}</dd>
                    <dt class="subItem-title">项目实施单位</dt>
                    <dd class="subItem-content">{{data.projImplementOrg}}</dd>
                     <dt class="subItem-title">是否入统</dt>
                    <dd class="subItem-content" v-if='data.isStatistics==1'>是</dd>
                    <dd class="subItem-content" v-if='data.isStatistics==0'>否</dd>
                     <dt class="subItem-title">实际总投资</dt>
                    <dd class="subItem-content">{{data.realInvestment}}</dd>
                     <dt class="subItem-title">土地费用</dt>
                    <dd class="subItem-content">{{data.landCost}}</dd>
                     <dt class="subItem-title">备注</dt>
                    <dd class="subItem-content">{{data.notes}}</dd>
                </dl>
            </div>
        </div>
        <div class="item">
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">项目联系人</span></div></div>
            <div class="item-content">
                 <dl class="subItem" style="float:left">
                    <dt class="subItem-title">分管领导/企业法人</dt>
                    <dd class="subItem-content">{{data.businessEntity}}</dd>
                    <dt class="subItem-title">项目部门负责人</dt>
                    <dd class="subItem-content">{{data.projDepartLeader}}</dd>
                    <dt class="subItem-title">项目负责人</dt>
                    <dd class="subItem-content">{{data.projLeader}}</dd>
                 </dl>
                 <dl class="subItem" style="float:right">
                    <dt class="subItem-title">总监</dt>
                    <dd class="subItem-content">{{data.director}}</dd>
                    <dt class="subItem-title">项目经理</dt>
                    <dd class="subItem-content">{{data.projManager}}</dd>
                 </dl>
            
            </div>
        </div>
        <div class="item">
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">项目进度</span></div></div>
            <div class="item-content">
                <el-steps :active="nowProgress" finish-status="success" style="margin-top:8px;margin-left: 30px;">
                        <el-step title="规划"></el-step>
                        <el-step title="立项"></el-step>
                        <el-step title="施工"></el-step>
                        <el-step title="竣工"></el-step>
                </el-steps>
                <dl class="subItem" style="float:left" v-if='yearData.dateYear'>
                    <dt class="subItem-title">{{yearData.dateYear+"年计划投资"}}</dt>
                    <dd class="subItem-content">{{yearData.planInvestment}}</dd>
                    <dt class="subItem-title">{{yearData.dateYear+"年计划主要建设内容"}}</dt>
                    <dd class="subItem-content">{{yearData.consContent}}</dd>
                    
                 </dl>
                 <dl class="subItem" style="float:right" v-if='yearData.dateYear'>
                    <dt class="subItem-title">{{yearData.dateYear+"年截至6月份总投资"}}</dt>
                    <dd class="subItem-content">{{monthData.ljInvestment}}</dd>
                    <dt class="subItem-title">{{yearData.dateYear+"年截至6月份的进度"}}</dt>
                    <dd class="subItem-content">{{monthData.currentStage}}</dd>
                 </dl>
                
            </div>
        </div>
        <div class="item">
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">项目简报(最新)</span></div></div>    
            <div class="item-content">
                <ul>
                    <li class="subItem" v-for="item in jianbao" :key="item.pkid" style="overflow: hidden;"><a class="jianbao" title="点击下载" :href="downSrc+'/'+item.mediaID">{{item.mediaName}}</a></li>              
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">施工图片(最新)</span></div></div>
            <div class="item-content" >
                <el-carousel  :interval="4000"  type="card">
                    <el-carousel-item v-for="item in images" :key="item.pkid" >
                        <!--<img :src="downSrc+'/'+item.mediaID" style="height:300px;margin: 0 auto;">-->
                        <div style="height:300px;text-align:center">
                            <img :src="downSrc+'/'+item.mediaID" style="height:300px">
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="item">
            <div class="item-title"><div><span style="border-left: 12px solid #4F9CEE;padding-left: 18px;">视频监控</span></div></div>
            <div class="item-content"></div>
        </div>

    </div>
</template>
<script>
    import {projectType,projectProgress,ServiceConfig} from "../tool/Global/app-config.js";
    import date_formate from "../tool/Global/dateutil.js";
    import {queryProjectdetailByPkid,queryProYearScheduleByProjectid,queryProMonthScheduleByProjectid,queryProjectMediaByScheduleid} from "../tool/Global/app-mgr.js"; 
    export default {
        props: ['projectId'],
        data: function(){
            return {
                data:{},
                yearData:{},
                monthData:{},
                jianbao:[],
                downSrc:ServiceConfig.archiveUrl,
                images:[],
                nowProgress:null
            }
        },
        mounted:function(){
            let ref = this;
            this.$nextTick(function () {
                ref.getProjectInfo();
            })
        },
        methods:{
            getProjectInfo(){
                let ref = this;
                queryProYearScheduleByProjectid(this.projectId).then(function(result){
                    if(result.data.success){
                        if(result.data.data.datalist.length){
                            ref.yearData = result.data.data.datalist[0];
                            if(ref.yearData.dateYear){
                                ref.yearData.dateYear = date_formate.format(new Date(ref.yearData.dateYear),"yyyy");
                                queryProMonthScheduleByProjectid(ref.projectId,{dateMonth:ref.yearData.dateYear+"/06"}).then(function(result){
                                    if(result.data.data.datalist.length){
                                        ref.monthData = result.data.data.datalist[0];
                                        if(ref.monthData.currentStage!=null){
                                            ref.monthData.currentStage = projectProgress[ref.monthData.currentStage-1].name; 
                                        }
                                        if(ref.monthData.ljInvestment!=null){
                                            ref.monthData.ljInvestment = ref.monthData.ljInvestment+"万元";
                                        }
                                    }
                                })
                            }
                        }else{
                            ref.yearData.dateYear = "";
                        }
                    }
                });
                queryProMonthScheduleByProjectid(ref.projectId).then(function(result){
                    if(result.data.data.datalist.length){
                        var pkid = result.data.data.datalist[0].pkid;
                        queryProjectMediaByScheduleid(pkid,{mediaType:1}).then(function(result){
                            ref.jianbao = result.data.data.datalist;
                        });
                        queryProjectMediaByScheduleid(pkid,{mediaType:3}).then(function(result){
                            ref.images = result.data.data.datalist;
                        })
                    }
                });
                queryProjectdetailByPkid(this.projectId).then(function(result){
                    if(result.data.success){
                        ref.data = result.data.data;
                        if(ref.data.currentStage){
                             ref.nowProgress = parseInt(ref.data.currentStage);
                        }             
                        if(ref.data.realInvestment){
                            ref.data.realInvestment = ref.data.realInvestment+"万元";
                        }
                        if(ref.data.consEndYear){
                            ref.data.consEndYear = date_formate.format(new Date(ref.data.consEndYear),"yyyy/MM");
                        }
                        if(ref.data.consStartYear){
                            ref.data.consStartYear = date_formate.format(new Date(ref.data.consStartYear),"yyyy/MM");
                        }
                        if(ref.data.planCompleteTime){
                            ref.data.planCompleteTime = date_formate.format(new Date(ref.data.planCompleteTime),"yyyy/MM/dd");
                        }
                        if(ref.data.realStartWorkTime){
                            ref.data.realStartWorkTime = date_formate.format(new Date(ref.data.realStartWorkTime),"yyyy/MM/dd");
                        }
                        if(ref.data.winBidTime){
                            ref.data.winBidTime = date_formate.format(new Date(ref.data.winBidTime),"yyyy/MM/dd");
                        }
                        if(ref.data.planStartWorkTime){
                            ref.data.planStartWorkTime = date_formate.format(new Date(ref.data.planStartWorkTime),"yyyy/MM");
                        }
                        if(ref.data.isStatistics!=null){
                            if(ref.data.isStatistics){
                                ref.data.isStatistics = "是";
                            }else{
                                ref.data.isStatistics = "否";
                            }
                        }
                        if(ref.data.projType!=null){
                            ref.data.projType = projectType[ref.data.projType-1].name; 
                        }
                        if(ref.data.currentStage!=null){
                            ref.data.currentStage = projectProgress[ref.data.currentStage-1].name; 
                        }                  
                    }else{
                        ref.$message(result.data.message)
                    }
                })
            }
        }
        
    }
</script>
<style scoped>
    .projectInfo{
        height:750px;
        overflow: auto;
        border: 1px solid #9E9E9E;
    }
    .subItem{
        margin-left: 30px;
        width: 562px;
    }
    .item-title{
        clear: both;
        font-size: 20px;
        color:black;
        font-weight: 700;
        height: 60px;
        line-height: 60px;
        background-image:url(../../assets/paraTitle-line.png);
        background-position-y: 17px;
        background-repeat-y: no-repeat;
    }
    .item-title div{
        height: 60px;
        line-height: 60px;
        float: left;
        background-color:#fff;
        font-size: 22px;
        font-weight: 400
    }
    .item-content{

        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 14px;
        overflow: hidden;
    }
    ul li{  
        list-style-type:none;  
    }
    .subItem-content{
        font-size: 18px;
        /* border: 1px dashed; */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        color: #333;
    }
    .jianbao{
        cursor:pointer;
        margin-bottom: 10px;
        float:left
    }
    .subItem-title{
        font-size: 18px;
        padding-right: 20px;
        float: left;
        clear: both;
        /* border: 1px dashed; */
        
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        color: #999;
    }
</style>


